<template>
    <div class="fillcontain">
        <head-top></head-top>
        <el-tabs type="border-card">
            <el-tab-pane label="其他收支详情管理">
                <otherChargeList></otherChargeList>
            </el-tab-pane>
            <el-tab-pane label="新增其他收支">
                <addOtherChargeFee></addOtherChargeFee>
            </el-tab-pane>
            <el-tab-pane label="新增其他收支类别">
                <addBalanceType></addBalanceType>
            </el-tab-pane>
            <el-tab-pane label="项目管理">
                <addBalanceItem></addBalanceItem>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import headTop from '../components/headTop'
    import otherChargeList from '../page/otherChargeList.vue'
    import addOtherChargeFee from '../page/addOtherChargeFee.vue'
    import addBalanceType from '../page/addBalanceType.vue'
    import addBalanceItem from '../page/addBalanceItem.vue'
    import {getUserList, getUserCount} from '@/api/getData'

    export default {
        data() {
            return {
                tableData: [{
                    registe_time: '2016-05-02',
                    username: '王小虎',
                    city: '上海市普陀区金沙江路 1518 弄'
                }, {
                    registe_time: '2016-05-04',
                    username: '王小虎',
                    city: '上海市普陀区金沙江路 1517 弄'
                }, {
                    registe_time: '2016-05-01',
                    username: '王小虎',
                    city: '上海市普陀区金沙江路 1519 弄'
                }, {
                    registe_time: '2016-05-03',
                    username: '王小虎',
                    city: '上海市普陀区金沙江路 1516 弄'
                }],
                currentRow: null,
                offset: 0,
                limit: 20,
                count: 0,
                currentPage: 1,
            }
        },
        components: {
            headTop,
            otherChargeList,
            addOtherChargeFee,
            addBalanceType,
            addBalanceItem,
        },
        created() {
            this.initData();
        },
        methods: {
            async initData() {
                try {
                    const countData = await getUserCount();
                    if (countData.status == 1) {
                        this.count = countData.count;
                    } else {
                        throw new Error('获取数据失败');
                    }
                    this.getUsers();
                } catch (err) {
                    console.log('获取数据失败', err);
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1) * this.limit;
                this.getUsers()
            },
            async getUsers() {
                const Users = await getUserList({offset: this.offset, limit: this.limit});
                this.tableData = [];
                Users.forEach(item => {
                    const tableData = {};
                    tableData.username = item.username;
                    tableData.registe_time = item.registe_time;
                    tableData.city = item.city;
                    this.tableData.push(tableData);
                })
            }
        },
    }
</script>
